<template>
	<view class="main-container">
		
		<u-divider text="规范确定" textSize="28"></u-divider>
		
		
		安卓
		<view class="show-card">
			<view class="fw-200"> 200 窗前明月光 Hello World</view>
			<view class="fw-300"> 300 窗前明月光 Hello World</view>
			<view class="fw-400"> 400 窗前明月光 Hello World</view>
			<view class="fw-600"> 600 窗前明月光 Hello World</view>
			<view class="fw-800"> 800 窗前明月光 Hello World</view>
		</view>
		
		小程序
		<view class="show-card">
			<view class="fw-200"> 200 窗前明月光 Hello World</view>
			<view class="fw-300"> 300 窗前明月光 Hello World</view>
			<view class="fw-400"> 400 窗前明月光 Hello World</view>
			<view class="fw-600"> 600 窗前明月光 Hello World</view>
			<view class="fw-800"> 800 窗前明月光 Hello World</view>
		</view>
		
		双端
		<view class="show-card">
			<view class="fw-300"> 300 窗前明月光 Hello World</view>
			<view class="fw-400"> 400 窗前明月光 Hello World</view>
			<view class="fw-600"> 600 窗前明月光 Hello World</view>
			<view class="fw-800"> 800 窗前明月光 Hello World</view>
		</view>
		

	<u-divider text="产出 样式" textSize="28"></u-divider>
	
	.font-300  .font-400 .font-600  .font-800
	
	
	
	

		<u-divider text="测试字重" textSize="28"></u-divider>

		<view>
			<text>
				通过设置 fontWeight: Number的效果
			</text>
		</view>


		<view class="show-card">
			<view class="fw-200"> 200 窗前明月光 Hello World</view>
			<view class="fw-300"> 300 窗前明月光 Hello World</view>
			<view class="fw-400"> 400 窗前明月光 Hello World</view>
			<view class="fw-500"> 500 窗前明月光 Hello World</view>
			<view class="fw-600"> 600 窗前明月光 Hello World</view>
			<view class="fw-700"> 700 窗前明月光 Hello World</view>
			<view class="fw-800"> 800 窗前明月光 Hello World</view>
			<view class="fw-900"> 900 窗前明月光 Hello World</view>
		</view>
		<view>
			<text>
				通过设置 fontWeight: String的效果
			</text>
		</view>
		<view class="show-card">
			<view class="f-lighter"> lighter 窗前明月光 Hello World</view>
			<view class="f-normal"> normal 窗前明月光 Hello World</view>
			<view class="f-bold"> bold 窗前明月光 Hello World</view>
			<view class="f-bolder"> bolder 窗前明月光 Hello World</view>

		</view>


		<u-divider text="总结" textSize="28"></u-divider>


		<view class="">
			<view class="show-card">
				<ul>
					开发 android app时，遵守以下规则：
					<li>极细 - 200</li>
					<li>细 - 300</li>
					<li>常规 400</li>
					<li>加粗 500 600 700 </li>
					<li>重粗 800 - 900 </li>
				</ul>
			</view>

			<view class="show-card">
				<ul>
					开发 小程序 时，遵守以下规则：
					<li>细 300</li>
					<li>常规 400</li>
					<li>加粗 600</li>
					<li>重粗 800 </li>
				</ul>
			</view>




			<view class="show-card">
				<ul>
					开发 双端 时，遵守以下规则：
					<li>常规 400</li>
					<li>加粗 600</li>
					<li>重粗 800 </li>
				</ul>
			</view>
		</view>


		
		



	</view>
</template>

<script>
	export default {

		data() {
			return {

			}
		},
		methods: {
			routerTo(path) {
				uni.navigateTo({
					url: path
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main-container {
		padding: 20rpx 36rpx;
	}
	.show-card {
		padding: 32rpx;
		font-size: 28rpx;

		view {
			padding: 10rpx;
		}
	}

	.fw-200 {
		font-size: 32rpx;
		font-weight: 200;
	}

	.fw-300 {
		font-size: 32rpx;
		font-weight: 300;
	}

	.fw-400 {
		font-size: 32rpx;
		font-weight: 400;
	}

	.fw-500 {
		font-size: 32rpx;
		font-weight: 500;
	}

	.fw-600 {
		font-size: 32rpx;
		font-weight: 600;
	}

	.fw-700 {
		font-size: 32rpx;
		font-weight: 700;
	}

	.fw-800 {
		font-size: 32rpx;
		font-weight: 800;
	}

	.fw-800 {
		font-size: 32rpx;
		font-weight: 800;
	}

	.fw-900 {
		font-size: 32rpx;
		font-weight: 900;
	}


	.f-bold {
		font-weight: bold;
	}

	.f-bolder {
		font-weight: bolder;
	}

	.f-lighter {
		font-weight: lighter;
	}

	.f-normal {
		font-weight: normal;
	}
</style>